{% extends 'index.html' %}
{% block page-content %}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <style>
        .filter a {
            text-decoration: none;
            color: gray;
        }

        .active {
            color: blue !important;
        }
    </style>
</head>
<body>
<div class="page-header">
    <h2>数据列表 <small>数据展示</small></h2>
</div>

<div class="container">

    <div class="row">
        <div class="col-md-9">
            <a href="add/" class="btn btn-primary">添加数据</a>
            {% if self.search_fields %}
                <form action="" class="pull-right">
                    <input type="text" name="q" class="input-group-sm" value="{{ key_word }}">
                    <button class="btn-primary">search</button>
                </form>
            {% endif %}

            <form action="" method="post">
                {% csrf_token %}
                <select name="action" id="" style="width: 200px; padding: 5px 8px; display: inline-block">
                    <option value="">-------------</option>
                    {% for item in showlist.get_action_list %}
                        <option value="{{ item.name }}">{{ item.desc }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-info">Go</button>

                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        {% for item in header_list %}
                            <th>{{ item }}</th>
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody>
                    {% for data in list %}
                        <tr>
                            {% for item in data %}
                                <td>{{ item }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </form>
            <nav class="pull-right">
                <ul class="pagination" id="pager">

                    {% if list.has_previous %}
                        <li class="previous"><a
                                href="{{ now_path }}page={{ list.previous_page_number }}">上一页</a>
                        </li>
                    {% else %}
                        <li class="previous disabled"><a href="#">上一页</a></li>
                    {% endif %}


                    {% for num in page_range %}

                        {% if num == currentPage %}
                            <li class="item active"><a
                                    href="{{ now_path }}page={{ num }}">{{ num }}</a></li>
                        {% else %}
                            <li class="item"><a
                                    href="{{ now_path }}page={{ num }}">{{ num }}</a></li>

                        {% endif %}
                    {% endfor %}



                    {% if list.has_next %}
                        <li class="next"><a
                                href="{{ now_path }}page={{ list.next_page_number }}">下一页</a>
                        </li>
                    {% else %}
                        <li class="next disabled"><a href="#">下一页</a></li>
                    {% endif %}

                </ul>
            </nav>
        </div>

        <div class="col-md-3">

            {% if showlist.config.list_filter %}
                <div class="filter">
                    <h4 style="">Filter</h4>
                    {% for filter_field, linktags in showlist.get_filter_linktags.items %}
                        <div class="well">
                            <p>By {{ filter_field.upper }}</p>
                            {% for link in linktags %}
                                <p>{{ link|safe }}</p>
                            {% endfor %}

                        </div>
                    {% endfor %}
                </div>
            {% endif %}

        </div>

    </div>
</div>

<script>

    $('#choice').click(function () {

        if ($(this).prop('checked')) {
            $('.choice_item').prop('checked', true)
        } else {
            $('.choice_item').prop('checked', false)
        }

    })

</script>

</body>
{% endblock %}